<template>
  <div class="main">
    <!-- 轮播图 -->
    <div class="lunbo"><img src="../../assets/images/lb1.jpg" alt="" /></div>
    <!-- 标题组件 -->
    <xtltie :xtitle="xtitle"></xtltie>
    <div class="box">
      <!-- 服务项目 -->
      <div class="serve-nav">
        <ul>
          <li @click="jumpwinery">
            <div><img src="../../assets/images/fw1.jpg" alt="" /></div>
            <span>关于酒庄</span>
          </li>
          <li @click="jumpproduct">
            <div><img src="../../assets/images/fw2.jpg" alt="" /></div>
            <span>产品展示</span>
          </li>
          <li>
            <div><img src="../../assets/images/fw3.jpg" alt="" /></div>
            <span>空中酒窖</span>
          </li>
          <li>
            <div><img src="../../assets/images/fw4.jpg" alt="" /></div>
            <span>封坛/定制</span>
          </li>
          <li @click="jumpMicrovision">
            <div><img src="../../assets/images/fw5.jpg" alt="" /></div>
            <span>微短视频</span>
          </li>
          <li @click="jumpActivity">
            <div><img src="../../assets/images/fw6.jpg" alt="" /></div>
            <span>活动专区</span>
          </li>
          <li>
            <div><img src="../../assets/images/fw7.jpg" alt="" /></div>
            <span>加盟/网点</span>
          </li>
        </ul>
      </div>
      <!-- 产品展示-->
      <div class="product">
        <div class="p-title">
          <h2>产品展示</h2>
          <div class="t-rihgt">
            <span
              :class="{ trchecked: trcheck == item.groupId }"
              @click="chengea(item.groupId)"
              v-for="(item, index) in groupList"
              :key="index"
              >{{ item.groupName }}</span
            >
            <span class="rihgt-btn" @click="jumpProduct">更多+</span>
          </div>
        </div>
        <div class="p-mian">
          <div class="p-m-box" v-for="(item, index) in goodsList" :key="index">
            <img :src="item.image" alt="" />
            <div class="box-text">
              {{ item.name }}
            </div>
            <div class="box-price">
              <span
                ><span>￥</span><span>{{ item.price }}</span></span
              >
              <span class="b-p-btn">立即购买</span>
            </div>
          </div>
        </div>
      </div>
      <!-- 封坛\定制 -->
      <div class="product">
        <div class="p-title">
          <h2>封坛\定制</h2>
          <div class="t-rihgt">
            <span
              :class="{ trchecked: customaltar }"
              :chenge-type="customaltar"
              @click="chenge"
              >我要封坛</span
            ><span
              :class="{ trchecked: !customaltar }"
              :chenge-type="customaltar"
              @click="chenge"
              >我要定制</span
            >
            <span class="rihgt-btn" @click="jumpCustomAltar">更多+</span>
          </div>
        </div>
        <div class="p-mian">
          <div class="p-m-box">
            <img src="../../assets/images/img1.jpg" alt="" />
            <div class="box-text">
              泸州老窖 52度 老窖藏品 浓香型白酒 悦传礼盒 装 520ml*6
              整箱装（含礼品袋）
            </div>
            <div class="box-price">
              <span><span>￥</span><span>164-864</span></span>
              <span class="b-p-btn">立即购买</span>
            </div>
          </div>
          <div class="p-m-box">
            <img src="../../assets/images/img2.jpg" alt="" />
            <div class="box-text">
              泸州老窖 52度 老窖藏品 浓香型白酒 悦传礼盒 装 520ml*6
              整箱装（含礼品袋）
            </div>
            <div class="box-price">
              <span><span>￥</span><span>164-864</span></span>
              <span class="b-p-btn">立即购买</span>
            </div>
          </div>
          <div class="p-m-box">
            <img src="../../assets/images/img3.jpg" alt="" />
            <div class="box-text">
              泸州老窖 52度 老窖藏品 浓香型白酒 悦传礼盒 装 520ml*6
              整箱装（含礼品袋）
            </div>
            <div class="box-price">
              <span><span>￥</span><span>164-864</span></span>
              <span class="b-p-btn">立即购买</span>
            </div>
          </div>
          <div class="p-m-box">
            <img src="../../assets/images/img4.jpg" alt="" />
            <div class="box-text">
              泸州老窖 52度 老窖藏品 浓香型白酒 悦传礼盒 装 520ml*6
              整箱装（含礼品袋）
            </div>
            <div class="box-price">
              <span><span>￥</span><span>164-864</span></span>
              <span class="b-p-btn">立即购买</span>
            </div>
          </div>
          <div class="p-m-box">
            <img src="../../assets/images/img5.jpg" alt="" />
            <div class="box-text">
              泸州老窖 52度 老窖藏品 浓香型白酒 悦传礼盒 装 520ml*6
              整箱装（含礼品袋）
            </div>
            <div class="box-price">
              <span><span>￥</span><span>164-864</span></span>
              <span class="b-p-btn">立即购买</span>
            </div>
          </div>
          <div class="p-m-box">
            <img src="../../assets/images/img6.jpg" alt="" />
            <div class="box-text">
              泸州老窖 52度 老窖藏品 浓香型白酒 悦传礼盒 装 520ml*6
              整箱装（含礼品袋）
            </div>
            <div class="box-price">
              <span><span>￥</span><span>164-864</span></span>
              <span class="b-p-btn">立即购买</span>
            </div>
          </div>
        </div>
      </div>
      <!-- 微短视频 -->
      <div class="microvision">
        <div class="m-title">
          <span>微短视频</span>
          <span @click="jumpMicrovision">更多+</span>
        </div>
        <div class="m-img">
          <div class="img-left">
            <img src="../../assets/images/wdsp5.jpg" alt="" />
            <div class="i-l-text">壮家父老乡亲--情系燕台山</div>
          </div>
          <div class="img-right">
            <div class="i-r-box">
              <img src="../../assets/images/wdsp1.jpg" alt="" />
              <div class="i-r-text">壮家父老乡亲--情系燕台山</div>
            </div>
            <div class="i-r-box">
              <img src="../../assets/images/wdsp2.jpg" alt="" />
              <div class="i-r-text">壮家父老乡亲--情系燕台山</div>
            </div>
            <div class="i-r-box">
              <img src="../../assets/images/wdsp3.jpg" alt="" />
              <div class="i-r-text">壮家父老乡亲--情系燕台山</div>
            </div>
            <div class="i-r-box">
              <img src="../../assets/images/wdsp4.jpg" alt="" />
              <div class="i-r-text">壮家父老乡亲--情系燕台山</div>
            </div>
          </div>
        </div>
      </div>
      <!-- 新闻姿讯 -->
      <div class="news">
        <div class="n-title">
          <span>新闻资讯</span>
          <span @click="jumpNews">更多+</span>
        </div>
        <div class="n-main">
          <div class="main-left">
            <div class="m-l-img">
              <img :src="newsList[0] ? newsList[0].cover : ''" alt="" />
            </div>
            <div class="m-l-text">
              <h3>{{ newsList[0] ? newsList[0].title : "" }}</h3>
              <span v-html="newsList[0] ? newsList[0].abstract : ''"></span>
            </div>
          </div>
          <div class="main-right">
            <ul>
              <li v-for="item in newsList" :key="item.id">
                <div class="r-time" v-if="item.updateTime">
                  <div>
                    {{ new Date(Number(item.updateTime) * 1000).getDate() }}
                  </div>
                  <div>
                    {{
                      new Date(Number(item.updateTime) * 1000).getFullYear()
                    }}-{{
                      new Date(Number(item.updateTime) * 1000).getMonth() + 1
                    }}
                  </div>
                </div>
                <div class="r-time" v-else>
                  <div>
                    {{ new Date(Number(item.addTime) * 1000).getDate() }}
                  </div>
                  <div>
                    {{ new Date(Number(item.addTime) * 1000).getFullYear() }}-{{
                      new Date(Number(item.addTime) * 1000).getMonth() + 1
                    }}
                  </div>
                </div>
                <div class="m-r-text">
                  <h5>{{ item.title }}</h5>
                  <span v-html="item.abstract"></span>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <!-- 返回顶部按钮 -->
    <div class="gotop" v-if="checked">
      <div>
        <img src="../../assets/images/btn1.jpg" alt="QQ咨询" /><span
          >QQ咨询</span
        >
      </div>
      <div>
        <img src="../../assets/images/btn2.jpg" alt="电话咨询" /><span
          >电话咨询</span
        >
      </div>
      <div>
        <img src="../../assets/images/btn3.jpg" alt="关注微信" /><span
          >关注微信</span
        >
      </div>
      <div class="btns" @click="gotop">
        <img src="../../assets/images/btn4.png" alt="返回顶部" /><span
          >返回顶部</span
        >
      </div>
    </div>
    <!-- 底部 -->
    <div class="bot">
      <div class="bot-top">
        <ul class="bot-nav">
          <li>首页</li>
          <li @click="jumpwinery">关于我们</li>
          <li>产品展示</li>
          <li>微短视频</li>
          <li>封坛/定制</li>
          <li>加盟网点</li>
          <li>新闻中心</li>
        </ul>
      </div>
      <div class="bot-logo">
        <img src="../../assets/images/logo.png" alt="logo" />
      </div>
      <div class="icp">
        辽公网安备 23456号 (c)Copyright 2022 燕台山酒庄 版权所有
        粤ICP备13022898号
      </div>
    </div>
  </div>
</template>

<script>
// 导入产品数据
import {
  getGoods,
  getGoodsGroup,
  getNewsList,
  getNewsClassList,
} from "../../api/goods.js";
//导入标题组件
import Xtltie from "../../components/Xtltie.vue";
export default {
  name: "frontPage",
  //注册组件
  components: { Xtltie },
  data() {
    return {
      userData: {
        account: "18924173266",
        // account: "13084998350",
        pwd: "123456",
      },
      checked: false, //判断窗口高度
      customaltar: true, //判断定制，封坛
      xtitle: {
        name: "服务项目",
        nameEnglish: "SERVICE PROJECT",
      },
      typeimg: [],
      goodsList: [], //产品展示
      groupList: [], //产品分组列表
      trcheck: 0, //产品系列id
      newsList: [], //新闻列表
    };
  },
  created() {
    this.getList();
    this.GoodsGroup();
    this.newsClassListGet();
  },
  mounted() {
    window.addEventListener("scroll", this.chnegeChecked, true);
  },
  methods: {
    getList() {
      this.$store
        .dispatch("LoginByUsername", this.userData)
        .then((response) => {
          console.log("login的92");
        });
    },
    //产品分组列表
    GoodsGroup() {
      getGoodsGroup().then((res) => {
        console.log("分组", res.data.data.records);
        this.groupList = res.data.data.records;
        this.trcheck = res.data.data.records[0].groupId;
        this.GoodsList({ group_id: res.data.data.records[0].groupId });
      });
    },
    //产品列表
    GoodsList(query) {
      getGoods(query).then((res) => {
        console.log("商品", res.data.data);
        this.goodsList = res.data.data;
      });
    },
    //获取新闻分类列表
    newsClassListGet() {
      getNewsClassList({ currentPage: 1, pageSize: 10 }).then((res) => {
        console.log("新闻分类", res.data.data);
        this.newsListGet(res.data.data.records[0].id);
      });
    },
    //获取新闻列表
    newsListGet(categoryId) {
      getNewsList({ categoryId, currentPage: 1, pageSize: 10 }).then((res) => {
        console.log("新闻", res.data.data);
        if (res.data.data.records.length > 3) {
          for (var i = 0; i < 3; i++) {
            this.newsList.push(res.data.data.records[i]);
          }
        } else {
          this.newsList = res.data.data.records;
        }
      });
    },
    //产品分组按钮点击回调
    chengea(id) {
      this.trcheck = id;
      this.GoodsList({ group_id: id });
    },
    //封坛定制分组按钮点击回调
    chenge() {
      this.customaltar = !this.customaltar;
    },
    // 产品展示更多按钮跳转
    jumpProduct() {
      this.$router.push({
        name: "hardcover",
        query: {
          xtitle: this.groupList.find((x) => x.groupId == this.trcheck)
            .groupName,
          groupId: this.trcheck,
        },
      });
      // 判断当前trcheck是true
      // if (this.trcheck !== true) {
      //   // 跳转到精装
      //   this.$router.push({ path: "/product/hardcover" });
      // } else {
      //   // 跳转到简装
      //   this.$router.push({ path: "/product/paperback" });
      // }
    },
    // 定制封坛更多按钮跳转
    jumpCustomAltar() {
      if (this.customaltar == true) {
        // 跳转到封坛
        this.$router.push({ path: "/sealtheAltar/SealtheAltar" });
      } else {
        // 跳转到定制
        this.$router.push({ path: "/sealtheAltar/formulate" });
      }
    },
    // 跳转到活动专区
    jumpActivity() {
      console.log("活动");
      this.$router.push({ path: "/Activity" });
    },
    // 跳转到封坛
    jumpSealtheAltar() {
      this.$router.push({ path: "/sealtheAltar/SealtheAltar" });
    },
    // 跳转到定制
    jumpFormulate() {
      this.$router.push({ path: "/sealtheAltar/formulate" });
    },
    //跳转到产品展示
    jumpproduct(){
      this.$router.push({path:"/product/Product"})
    },
    // 跳转到新闻
    jumpNews() {
      this.$router.push({ path: "/News" });
    },
    // 跳转到微视
    jumpMicrovision() {
      this.$router.push({ path: "/microvision/Microvision" });
    },
    //跳转到酒庄介绍
    jumpwinery() {
      this.$router.push({ path: "/frontPage/winery" });
    },
    // 判断页面下拉高度
    chnegeChecked() {
      let that = this;
      let scrollTop =
        document.documentElement.scrollTop || document.body.scrollTop;
      that.scrollTop = scrollTop;
      if (scrollTop > 1500) {
        this.checked = true;
      } else {
        this.checked = false;
      }
    },
    // 返回顶部
    gotop() {
      document.documentElement.scrollTop = 0;
    },
  },
};
</script>

<style lang="less" scoped>
@media screen and (min-width: 1029px) {
  // 轮播
  .lunbo {
    img {
      width: 100%;
    }
    position: relative;
  }
  // 主体样式
  .box {
    width: 70%;
    margin: auto;
    margin-top: 80px;
    // 服务项目下导航
    .serve-nav {
      margin-top: 20px;
      ul {
        display: flex;
        justify-content: space-between;
        li {
          div {
            width: 100%;
            margin-bottom: 10px;
            img {
              width: 100%;
            }
            img:hover {
              transform: scale(1.1);
            }
          }
          span {
            font-size: 20px;
            font-weight: bold;
          }
        }
        li:hover {
          color: #ce1113;
        }
      }
    }
    //  产品展示与封坛\定制
    .product {
      margin-top: 78px;
      .p-title {
        display: flex;
        margin-bottom: 52px;
        align-items: center;
        justify-content: space-between;
        h2 {
          font-size: 44px;
          font-weight: bold;
          color: #e50c09;
        }
        .t-rihgt {
          span {
            display: inline-block;
            margin-left: 50px;
            padding: 5px 0;
            font-size: 25px;
            &:hover {
              cursor: pointer;
            }
          }
          .trchecked {
            color: #ce1113;
            border-bottom: 2px solid #ce1113;
            pointer-events: none;
          }
          .rihgt-btn {
            color: #ffffff;
            font-size: 16px;
            border-radius: 3px;
            padding: 10px 40px;
            background-color: #ce1113;
          }
        }
      }
      .p-mian {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        .p-m-box {
          width: 30%;
          margin-bottom: 30px;
          border: 1px solid #eeeeee;
          padding-bottom: 10px;
          img {
            width: 100%;
          }
          .box-text {
            height: 66px;
            line-height: 22px;
            margin-top: 20px;
            margin-left: 20px;
            font-size: 17px;
            font-weight: bold;
            text-align: left;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
          }
          .box-price {
            margin-top: 20px;
            display: flex;
            padding: 0 10px;
            align-items: center;
            justify-content: space-between;
            span:nth-child(1) {
              color: #ce1113;
              span:nth-child(1) {
                font-size: 14px;
              }
              span:nth-child(2) {
                font-weight: bold;
                font-size: 18px;
              }
            }
            .b-p-btn {
              display: inline-block;
              width: 120px;
              height: 40px;
              line-height: 40px;
              border-radius: 30px;
              font-size: 16px;
              font-weight: bold;
              color: #ffffff;
              background-color: #e50c09;
            }
          }
        }
        .p-m-box:hover {
          border: 1px solid #ce1113;
          box-shadow: 0px 10px 20px -12px #ce1113;
        }
      }
    }
    //微短视频
    .microvision {
      margin-top: 78px;
      .m-title {
        display: flex;
        margin-bottom: 52px;
        align-items: center;
        justify-content: space-between;
        span:nth-child(1) {
          font-size: 44px;
          font-weight: bold;
          color: #e50c09;
        }
        span:nth-child(2) {
          display: inline-block;
          color: #ffffff;
          border-radius: 3px;
          padding: 10px 40px;
          background-color: #ce1113;
        }
      }
      .m-img {
        display: flex;
        justify-content: space-between;
        .img-left {
          width: 49%;
          position: relative;
          img {
            width: 100%;
          }
          .i-l-text {
            width: 100%;
            height: 50px;
            line-height: 50px;
            font-size: 20px;
            font-weight: bold;
            color: #ffffff;
            background-color: #ce1113;
            position: absolute;
            bottom: 16px;
          }
        }
        .img-right {
          width: 46%;
          display: flex;
          justify-content: space-between;
          flex-wrap: wrap;
          .i-r-box {
            width: 49%;
            margin-bottom: 20px;
            border: 1px solid #ce1113;
            position: relative;
            img {
              width: 100%;
            }
            .i-r-text {
              width: 100%;
              height: 50px;
              line-height: 50px;
              font-size: 20px;
              font-weight: bold;
              color: #ffffff;
              background-color: #ce1113;
              position: absolute;
              bottom: 0px;
            }
          }
        }
      }
    }
    // 新闻资讯
    .news {
      margin-top: 78px;
      .n-title {
        display: flex;
        margin-bottom: 52px;
        align-items: center;
        justify-content: space-between;
        span:nth-child(1) {
          font-size: 44px;
          font-weight: bold;
          color: #e50c09;
        }
        span:nth-child(2) {
          display: inline-block;
          color: #ffffff;
          border-radius: 3px;
          padding: 10px 40px;
          background-color: #ce1113;
        }
      }
      .n-main {
        display: flex;
        justify-content: space-between;

        .main-left {
          width: 50%;
          .m-l-img {
            // width: 100%;
            img {
              width: 100%;
            }
          }
          .m-l-text {
            h3 {
              margin-top: 30px;
              font-size: 20px;
              font-weight: bold;
              text-align: left;
              color: #000000;
            }
            span {
              display: inline-block;
              margin-top: 20px;
              font-size: 14px;
              text-align: left;
            }
          }
        }
        .main-right {
          width: 45%;
          ul {
            li {
              display: flex;
              justify-content: space-between;
              align-items: center;
              text-align: left;
              border-bottom: 1px solid #dddddd;
              margin-bottom: 32px;
              padding-bottom: 34px;
              .r-time {
                width: 110px;
                text-align: center;
                margin-right: 20px;
                white-space: nowrap;
                div:nth-child(1) {
                  font-size: 36px;
                  font-weight: bold;
                }
                div:nth-child(2) {
                  font-size: 14px;
                }
              }
              .m-r-text {
                h5 {
                  font-size: 16px;
                  font-weight: bold;

                  color: #000000;
                  margin-bottom: 20px;
                }
              }
            }
            li:hover {
              border-bottom: 1px solid #ce1113;
              .r-time,
              .m-r-text h5 {
                color: #ce1113;
              }
            }
          }
        }
      }
    }
  }
  // 返回顶部按钮
  .gotop {
    width: 100px;
    position: fixed;
    right: 50px;
    bottom: 366px;
    background-color: #ffffff;
    div {
      width: 100px;
      height: 100px;
      border: 1px solid #dddddd;
      img {
        margin-top: 20px;
      }
      span {
        display: block;
      }
    }
    div:hover {
      color: #ce1113;
    }
    .btn {
      width: 100px;
    }
  }
  // 底部样式
  .bot {
    width: 100%;
    height: 200px;
    margin-top: 50px;
    color: #ffffff;
    position: relative;
    background: url("../../assets/images/bottm-bj.jpg");
    .bot-top {
      display: flex;
      align-items: center;
      .bot-nav {
        display: flex;
        margin: auto;
        font-size: 16px;
        li {
          margin-top: 50px;
          margin-left: 70px;
        }
        li:hover {
          color: #ffe600;
        }
      }
    }
    .bot-logo {
      position: absolute;
      right: 8%;
      img {
        width: 100%;
      }
    }
    .icp {
      margin-top: 50px;
    }
  }
}
@media only screen and (min-width: 750px) and (max-width: 1028px) {
  // 轮播
  .lunbo {
    img {
      width: 100%;
    }
    position: relative;
  }
  // 主体样式
  .box {
    width: 70%;
    margin: auto;
    margin-top: 80px;
    // 服务项目下导航
    .serve-nav {
      margin-top: 20px;
      // overflow-x: scroll;
      ul {
        display: flex;
        justify-content: space-between;
        li {
          div {
            img {
              width: 100%;
            }
            img:hover {
              transform: scale(1.1);
            }
            margin-bottom: 10px;
          }
          span {
            font-size: 14px;
            font-weight: bold;
          }
        }
        li:hover {
          color: #ce1113;
        }
      }
    }
    //  产品展示与封坛\定制
    .product {
      margin-top: 78px;
      .p-title {
        display: flex;
        margin-bottom: 52px;
        align-items: center;
        justify-content: space-between;
        h2 {
          font-size: 22px;
          font-weight: bold;
          color: #e50c09;
        }
        .t-rihgt {
          span {
            display: inline-block;
            margin-left: 30px;
            padding: 5px 0;
            font-size: 18px;
          }
          .trchecked {
            color: #ce1113;
            border-bottom: 2px solid #ce1113;
            pointer-events: none;
          }

          .rihgt-btn {
            color: #ffffff;
            font-size: 16px;
            border-radius: 3px;
            padding: 10px 40px;
            background-color: #ce1113;
          }
        }
      }
      .p-mian {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        .p-m-box {
          width: 45%;
          margin-bottom: 30px;
          border: 1px solid #eeeeee;
          padding-bottom: 10px;
          img {
            width: 100%;
          }
          .box-text {
            height: 66px;
            line-height: 22px;
            margin-top: 20px;
            margin-left: 20px;
            font-size: 17px;
            font-weight: bold;
            text-align: left;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
          }
          .box-price {
            margin-top: 20px;
            display: flex;
            padding: 0 10px;
            align-items: center;
            justify-content: space-between;
            span:nth-child(1) {
              color: #ce1113;
              span:nth-child(1) {
                font-size: 14px;
              }
              span:nth-child(2) {
                font-weight: bold;
                font-size: 18px;
              }
            }
            .b-p-btn {
              display: inline-block;
              width: 120px;
              height: 40px;
              line-height: 40px;
              border-radius: 30px;
              font-size: 16px;
              font-weight: bold;
              color: #ffffff;
              background-color: #e50c09;
            }
          }
        }
        .p-m-box:hover {
          border: 1px solid #ce1113;
          box-shadow: 0px 10px 20px -12px #ce1113;
        }
      }
    }
    //微短视频
    .microvision {
      margin-top: 78px;
      .m-title {
        display: flex;
        margin-bottom: 52px;
        align-items: center;
        justify-content: space-between;
        span:nth-child(1) {
          font-size: 22px;
          font-weight: bold;
          color: #e50c09;
        }
        span:nth-child(2) {
          display: inline-block;
          color: #ffffff;
          border-radius: 3px;
          padding: 10px 40px;
          background-color: #ce1113;
        }
      }
      .m-img {
        // display: flex;
        // justify-content: space-between;
        .img-left {
          width: 100%;
          position: relative;
          img {
            width: 100%;
          }
          .i-l-text {
            width: 100%;
            height: 50px;
            line-height: 50px;
            font-size: 20px;
            font-weight: bold;
            color: #ffffff;
            background-color: #ce1113;
            position: absolute;
            bottom: 0px;
            z-index: 1;
          }
        }
        .img-right {
          width: 100%;
          margin-top: 10px;
          display: flex;
          justify-content: space-between;
          // flex-wrap: wrap;

          div {
            width: 23%;
            margin-bottom: 20px;
            border: 1px solid #ce1113;
            position: relative;
            img {
              width: 100%;
            }
            .i-r-text {
              width: 100%;
              // line-height: 50px;
              font-size: 12px;
              font-weight: bold;
              color: #ffffff;
              background-color: #ce1113;
              position: absolute;
              bottom: -20px;
            }
          }
        }
      }
    }
    // 新闻资讯
    .news {
      margin-top: 78px;
      .n-title {
        display: flex;
        margin-bottom: 52px;
        align-items: center;
        justify-content: space-between;
        span:nth-child(1) {
          font-size: 22px;
          font-weight: bold;
          color: #e50c09;
        }
        span:nth-child(2) {
          display: inline-block;
          color: #ffffff;
          border-radius: 3px;
          padding: 10px 40px;
          background-color: #ce1113;
        }
      }
      .n-main {
        // display: flex;
        // justify-content: space-between;
        .main-left {
          width: 100%;
        }
        .main-left {
          .m-l-img {
            img {
              width: 100%;
            }
          }
          .m-l-text {
            h3 {
              margin-top: 30px;
              font-size: 20px;
              font-weight: bold;
              text-align: left;
              color: #000000;
            }
            span {
              display: inline-block;
              margin-top: 20px;
              font-size: 14px;
              text-align: left;
            }
          }
        }
        .main-right {
          margin-top: 30px;
          ul {
            li {
              display: flex;
              justify-content: space-between;
              align-items: center;
              text-align: left;
              border-bottom: 1px solid #dddddd;
              margin-bottom: 32px;
              padding-bottom: 34px;
              .r-time {
                width: 100px;
                text-align: center;
                margin-right: 20px;
                white-space: nowrap;
                div:nth-child(1) {
                  font-size: 36px;
                  font-weight: bold;
                }
                div:nth-child(2) {
                  font-size: 14px;
                }
              }
              .m-r-text {
                h5 {
                  font-size: 16px;
                  font-weight: bold;

                  color: #000000;
                  margin-bottom: 20px;
                }
              }
            }
            li:hover {
              border-bottom: 1px solid #ce1113;
              .r-time,
              .m-r-text h5 {
                color: #ce1113;
              }
            }
          }
        }
      }
    }
  }
  // 返回顶部按钮
  .gotop {
    width: 50px;
    position: fixed;
    right: 50px;
    bottom: 366px;
    background-color: #ffffff;
    div {
      border: 1px solid #dddddd;
      img {
        width: 50%;
        margin-top: 20px;
      }
      span {
        display: block;
      }
    }
    div:hover {
      color: #ce1113;
    }
    .btns {
      width: 48px;
    }
  }
  // 底部样式
  .bot {
    width: 100%;
    height: 200px;
    margin-top: 50px;
    color: #ffffff;
    position: relative;
    background: url("../../assets/images/bottm-bj.jpg");
    .bot-top {
      display: flex;
      align-items: center;
      .bot-nav {
        display: flex;
        margin: auto;
        font-size: 16px;
        li {
          margin-top: 50px;
          margin-left: 40px;
        }
        li:hover {
          color: #ffe600;
        }
      }
    }
    .bot-logo {
      position: absolute;
      right: 8%;
      img {
        width: 100%;
        display: none;
      }
    }
    .icp {
      margin-top: 50px;
    }
  }
}
@media screen and (max-width: 749px) {
  // 轮播
  .main {
    width: 100%;
  }
  .lunbo {
    img {
      width: 100%;
    }
    position: relative;
  }
  // 主体样式
  .box {
    width: 90%;
    margin: auto;
    margin-top: 20px;
    // 服务项目下导航
    .serve-nav {
      width: 100%;
      margin-top: 20px;
      // overflow-x: scroll;
      ul {
        width: 100%;
        display: flex;
        justify-content: space-around;
        /*设置横向滚动*/
        overflow-x: scroll;
        /*禁止纵向滚动*/
        overflow-y: hidden;
        /*设置边距改变效果为内缩*/
        box-sizing: border-box;

        li {
          min-width: 50px;
          white-space: nowrap;
          padding: 10px;
          div {
            img {
              width: 100%;
            }
            img:hover {
              transform: scale(1.1);
            }
            margin-bottom: 10px;
          }
          span {
            font-size: 12px;
            font-weight: bold;
          }
        }
        li:nth-child(1) {
          margin-left: 167px;
        }
        li:hover {
          color: #ce1113;
        }
      }
    }
    //  产品展示与封坛\定制
    .product {
      margin-top: 10px;
      text-align: left;
      .p-title {
        // display: flex;
        margin-bottom: 20px;
        // align-items: center;
        // justify-content: space-between;
        h2 {
          // width: 30%;
          margin: auto;
          font-size: 16px;
          text-align: center;
          font-weight: bold;
          color: #e50c09;
        }
        .t-rihgt {
          width: 100%;
          display: flex;
          justify-content: space-around;
          align-items: flex-start;
          span {
            display: inline-block;
            padding: 5px 0;
            font-size: 16px;
          }
          .trchecked {
            color: #ce1113;
            border-bottom: 2px solid #ce1113;
            pointer-events: none;
          }

          .rihgt-btn {
            display: none;
          }
        }
      }
      .p-mian {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        .p-m-box {
          width: 45%;
          margin-bottom: 15px;
          border: 1px solid #eeeeee;
          padding-bottom: 10px;
          img {
            width: 100%;
          }
          .box-text {
            margin-top: 5px;
            margin-left: 20px;
            font-size: 14px;
            // font-weight: bold;
            text-align: left;
            display: -webkit-box; //对象作为弹性伸缩盒子模型显示
            overflow: hidden; //溢出隐藏
            -webkit-box-orient: vertical; //设置伸缩盒子对象的子元素的排列方式
            -webkit-line-clamp: 1; //设置 块元素包含的文本行数
          }
          .box-price {
            margin-top: 5px;
            display: flex;
            padding: 0 10px;
            align-items: center;
            justify-content: space-between;
            span:nth-child(1) {
              width: 60%;
              color: #ce1113;
              span:nth-child(1) {
                font-size: 14px;
              }
              span:nth-child(2) {
                // font-weight: bold;
                font-size: 12px;
              }
            }
            .b-p-btn {
              width: 40%;
              display: inline-block;
              height: 20px;
              line-height: 20px;
              border-radius: 5px;
              font-size: 12px;
              text-align: center;
              // font-weight: bold;
              color: #ffffff;
              background-color: #e50c09;
            }
          }
        }
        .p-m-box:hover {
          border: 1px solid #ce1113;
          box-shadow: 0px 10px 20px -12px #ce1113;
        }
      }
    }
    //微短视频
    .microvision {
      margin-top: 18px;
      .m-title {
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-bottom: 1px solid #ebe5e5;
        margin-bottom: 12px;
        padding-bottom: 5px;
        span:nth-child(1) {
          font-size: 22px;
          font-weight: bold;
          color: #e50c09;
        }
        span:nth-child(2) {
          display: inline-block;
          // color: #ffffff;
          border-radius: 3px;
          // padding: 10px 40px;
          // background-color: #ce1113;
        }
      }
      .m-img {
        // display: flex;
        // justify-content: space-between;
        .img-left {
          width: 100%;
          position: relative;
          img {
            width: 100%;
          }
          .i-l-text {
            width: 100%;
            height: 50px;
            line-height: 50px;
            font-size: 20px;
            font-weight: bold;
            color: #ffffff;
            background-color: #ce1113;
            position: absolute;
            bottom: 0px;
            z-index: 1;
          }
        }
        .img-right {
          width: 100%;
          margin-top: 10px;
          display: none;
          // display: flex;
          // justify-content: space-between;
          // flex-wrap: wrap;

          div {
            width: 23%;
            margin-bottom: 20px;
            border: 1px solid #ce1113;
            position: relative;
            img {
              width: 100%;
            }
            .i-r-text {
              width: 100%;
              // line-height: 50px;
              font-size: 12px;
              font-weight: bold;
              color: #ffffff;
              background-color: #ce1113;
              position: absolute;
              bottom: -20px;
            }
          }
        }
      }
    }
    // 新闻资讯
    .news {
      margin-top: 18px;
      .n-title {
        display: flex;
        margin-bottom: 12px;
        align-items: center;
        justify-content: space-between;
        border-bottom: 1px solid #ebe5e5;
        padding-bottom: 5px;
        span:nth-child(1) {
          font-size: 22px;
          font-weight: bold;
          color: #e50c09;
        }
        span:nth-child(2) {
          display: inline-block;
          color: #000000;
          border-radius: 3px;
          // padding: 10px 40px;
          // background-color: #ce1113;
        }
      }
      .n-main {
        // display: flex;
        // justify-content: space-between;

        .main-left {
          display: none;
          width: 100%;
          .m-l-img {
            img {
              width: 100%;
            }
          }
          .m-l-text {
            h3 {
              margin-top: 30px;
              font-size: 20px;
              font-weight: bold;
              text-align: left;
              color: #000000;
            }
            span {
              display: inline-block;
              margin-top: 20px;
              font-size: 14px;
              text-align: left;
            }
          }
        }
        .main-right {
          margin-top: 30px;
          ul {
            li {
              display: flex;
              justify-content: space-between;
              align-items: center;
              text-align: left;
              border-bottom: 1px solid #dddddd;
              margin-bottom: 32px;
              padding-bottom: 14px;
              .r-time {
                width: 25%;
                text-align: center;
                // margin-right: 20px;
                div:nth-child(1) {
                  // margin-right: 20px;
                  float: right;
                  font-size: 14px;
                  // font-weight: bold;
                }
                div:nth-child(2) {
                  float: left;
                  font-size: 14px;
                }
              }
              .m-r-text {
                width: 70%;
                h5 {
                  font-size: 16px;
                  // font-weight: bold;

                  color: #000000;
                  // margin-bottom: 10px;
                  display: -webkit-box; //对象作为弹性伸缩盒子模型显示
                  overflow: hidden; //溢出隐藏
                  -webkit-box-orient: vertical; //设置伸缩盒子对象的子元素的排列方式
                  -webkit-line-clamp: 1; //设置 块元素包含的文本行数
                }
                span {
                  display: none;
                }
              }
            }
            // li:hover {
            //   border-bottom: 1px solid #ce1113;
            //   .r-time,
            //   .m-r-text h5 {
            //     color: #ce1113;
            //   }
            // }
          }
        }
      }
    }
  }
  // 返回顶部按钮
  .gotop {
    width: 50px;
    position: fixed;
    right: 10px;
    bottom: 56px;
    background-color: #ffffff;
    z-index: 999;
    div {
      display: none;
      border: 1px solid #dddddd;
      img {
        display: none;
        width: 50%;
        margin-top: 20px;
      }
      span {
        display: block;
      }
    }
    div:hover {
      color: #ce1113;
    }
    .btns {
      display: block;
      width: 45px;
      height: 45px;
      border-radius: 30px;
    }
  }
  // 底部样式
  .bot {
    width: 100%;
    height: 50px;
    margin-top: 50px;
    color: #ffffff;
    position: relative;
    background: url("../../assets/images/bottm-bj.jpg");
    .bot-top {
      width: 30%;
      .bot-nav {
        display: flex;
        text-align: center;
        flex-wrap: wrap;
        margin-left: 15%;
        padding-top: 10%;
        display: none;
        li {
          width: 80px;
          margin-bottom: 10px;
          text-align: center;
        }
        li:hover {
          color: #ffe600;
        }
      }
    }
    .bot-logo {
      display: none;
      position: absolute;
      top: 20px;
      right: 10%;
      img {
        width: 100%;
      }
    }
    .icp {
      font-size: 14px;
    }
  }
}
</style>